define("carts",["jquery","jquery.cookie"],function () {
    return{
        cart:function () {
            $("header").load("header.html");
            $("footer").load("footer.html");
            $.ajax({
                url:"../server/cart.php",
            }).then(function (res) {

                res.forEach(function (ele,index) {
             var txt=`<h2>${ele.p_type}</h2>
            <p>${ele.p_name}</p>
            <h3>￥${ele.p_price}</h3>
            <del>￥1,088</del>
            <h4>${ele.p_sale}</h4>
            <p>满688元全场免运</p>
            <p><i class="gray">颜色:</i>${ele.p_color}</p>
            <p><img src="${ele.p_img}" alt=""></p>
            <p class="gray">选择尺码 </p>
            <p class="csize">
           
            </p>
            <p>数量</p>
            <div>
                <span id="reduce">-</span>
                <span id="num">1</span>
                <span id="add">+</span>
            </div>
            <p><img src="../img/pinpai.gif" alt="">
                预计4天内发货
                <a href="#">查看详情
                    <img src="../img/reserved_detail.png" alt=""></a>

            </p>
            <p  data-info='${JSON.stringify(ele)}'>
                <button id="join">加入购物袋</button>
                <button id="buy">立即购买</button>
            </p>
                 <div class="time">
                 <h3>限时抢购
                 <i>活动剩余</i>
                 </h3>
                 <div class="container">
                 <div><strong class="day"></strong><em>天</em></div>
                <div><strong class="hh"></strong><em>时</em></div>
                <div><strong class="mm"></strong><em>分</em></div>
               <div><strong class="ss"></strong><em>秒</em></div> 
                 </div>
                
            </div>
               `;
                    var target=new Date("2018/10/20");
                    setInterval(function(){
                        var nowtime=new  Date();
                        var time=target-nowtime;

                        var day=parseInt(time/1000/60/60/24);
                        var hour=parseInt(time/1000/60/60%24);
                        var mm=parseInt(time/1000/60%60);
                        var ss=parseInt(time/1000%60);
                        $(".day").html(day);
                        $(".hh").html(hour);
                        $(".mm").html(mm);
                        $(".ss").html(ss);

                        if($(".hh").html().length<=1){
                            $(".hh").html("0"+hour);
                        }
                        if($(".mm").html().length<=1){
                            $(".mm").html("0"+mm);
                        }
                        if($(".ss").html().length<=1){
                            $(".ss").html("0"+ss);
                        }


                    },1000);
                    $(".info").html($(txt));
                    ele.p_size.forEach(function (ele,index) {
                           var span=$("<span></span>");
                        $(".csize").append(span);
                        span.html(ele);

                    })
                })

            })
            var tmp;

            $("body").on("click",".csize>span",function () {
              tmp=$(this).text();
                $(this).addClass("on").siblings().removeClass("on");



            })


            $("body").on("click","#add",function () {
                $("#num").text(Number($("#num").text())+1);
                // if($("#num").text()>=5){
                //     $("#num").text(5);
                //     alert("最多购买5件");
                // }
            })
            $("body").on("click","#reduce",function () {
                $("#num").text(Number($("#num").text())-1);
                if($("#num").text()<=1){
                    $("#num").text(1);
                }
            })

            var num=0;

            $("#left").click(function () {
                num--;
                if(num<=0){
                    num=0;
                }
                $("ul").animate({left:num*-480})

            })
            $("#right").click(function () {
                num++;
                if(num>=3){
                    num=3;
                }
                $("ul").animate({left:num*-480})
            })

            $(document).scroll(function () {
                if($(this).scrollTop()>=100){
                    $("nav").css({"position":"fixed","top":0,"z-index":999});
                    $(".auto").css({"margin-top":$("nav").height()});

                }
                else {
                    $("nav").css({"position":"static"});
                    $(".auto").css({"margin-top":0});
                }
            })


            $("body").on("click","#join",function () {
                var gnum=Number($("#num").text());

                if(tmp!=null){
                    var img= $(this).parent().data("info").p_img;

                    var li=` <li>
                    <img src=${img} alt="">
                    <h3>${$(this).parent().data("info").p_name}</h3>
                    <p class="pirce">￥${$(this).parent().data("info").p_price}</p>
                    </li>`;
                    $(".shop").append(li);
                    var cimg=$("<img></img");
                    cimg.prop({src:img,position:"absolute",})



                    $(this).parent().data("info").p_size=tmp;
                    var info= $(this).parent().data("info");


                    if(sessionStorage["cartlist"]!=null){
                        //拿到用户id
                        var user=JSON.parse(sessionStorage["cartlist"] || '[]');


                        var data=new FormData();
                        data.append("uId",user.data.uId);
                        data.append("gNum",gnum);

                        //遍历商品信息
                        for(var val in info){
                            //把值追加到数据中 key:value
                            data.append(val,info[val]);

                        }
                        $.ajax({
                            type:"post",
                            url:"../server/insertcart.php",
                            data:data,
                            dataType:"json",
                            processData:false,
                            contentType:false,
                        }).then(function (res) {
                            console.log(res);
                        })


                    }
                    //未登录,存到cookie中
                    else {
                        //遍历读取cookie
                        var cookieList=JSON.parse($.cookie("cart") || '[]');
                        var stu=false;
                        //遍历cookie
                        cookieList.forEach((ele,index)=>{
                            if(ele.p_id==info.p_id){
                                stu=true;
                                ele.num+=gnum;
                                ele.toal+=$(this).parent().data("info").p_price*Number(gnum);

                            }

                        })

                        if(stu==false){
                            info.num=gnum;
                            console.log(gnum);
                            info.toal=$(this).parent().data("info").p_price*Number(gnum);
                            cookieList.push(info);
                        }

                        $.cookie("cart",JSON.stringify(cookieList));
                    }

                }
                else {
                    alert("请选择尺寸");
                    return;
                }

            })

            $(".small img").click(function () {
                console.log($(this).index());
                $(".big ul").animate({left:-480*$(this).index()})
                $(".bigimg").prop("src",$(this).prop("src"));

            })


            var sacle=$(".bigimg").height()/$(".big ul li").height();
            var wsacle=$(".bigimg").width()/$(".big ul li").width();


            $(".big").hover(function(){

                $(".area").css({
                    width:($(".big img").width()/$(".bigimg").width())*$(".bigarea").width(),
                    height:($(".big img").height()/$(".bigimg").height())*$(".bigarea").height(),

                });
                $(".area").css({display:"block"});
                $(".bigarea").css({display:"block"});

            },function(){

                $(".area").css({display:"none"});
                $(".bigarea").css({display:"none"});
            });

            $(".area").on("mousemove",function(e){
                var left=e.pageX-$(".big").offset().left-$(".area").width()/2;
                var top=e.pageY-$(".big").offset().top-$(".area").height()/2;

             if(left<=0){
                 left=0;
             }
            else if(left>=$(".big").width()-$(".area").width()){
                 left=$(".big").width()-$(".area").width();
             }

                if(top<=0){
                    top=0;
                }
            else  if(top>=$(".big").height()-$(".area").height()){
                    top=$(".big").height()-$(".area").height();
                }

                $(".area").css({
                    left:left,
                    top:top,
                })

                $(".bigimg").css({
                    left:-left*wsacle,
                    top:-top*sacle,
                })

            })





        }
    }
})